<template>
  <div>
    <el-card
      class="box-card-setting"
      shadow="never"
      v-for="(item, index) in configData"
      :key="index"
    >
      <div slot="header" class="clearfix">
        <span>{{ item.label }}</span>
      </div>
      <div class="crud">
        <Vuedraggable
          class="crudAllocation"
          :list="item.checkboxData"
          :animation="340"
        >
          <el-card
            shadow="never"
            style="width: 200px; margin: 8px;cursor: all-scroll;"
            v-for="(items, indexs) in item.checkboxData"
            :key="indexs"
            class="items"
          >
            <div slot="header" class="items_warp">
              <span class="label">{{ items.label || items.model }}</span>

              <el-switch style="z-index:2" v-model="items.checkbox"></el-switch>
              <img
                v-if="items.checkbox"
                src="@/assets/collect.png"
                style="width: 39px; position: absolute;top:-20px;right:-20px;z-index:1"
              />
            </div>
            <div>
              <el-form label-position="right" label-width="80px" :model="item">
                <el-form-item label="禁用:">
                  <el-switch v-model="items.attributes.disabled"></el-switch>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </Vuedraggable>
      </div>
    </el-card>
  </div>
</template>

<script>
import Vuedraggable from "vuedraggable";
export default {
  components: { Vuedraggable },
  props: {
    config: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    configData() {
      return this.config.filter(item => item.status);
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.box-card-setting {
  margin: 15px 0;
}
.crudAllocation {
  display: flex;
  flex-wrap: wrap;
}
.items {
  width: 300px !important;
}
.items_warp {
  position: relative;
  display: flex;
  justify-content: space-between;
  .label {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
